<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>线下大厅可视化大屏展示</title>
    <!-- Tailwind CSS -->
    <link href="../dist/output.css" rel="stylesheet" />
    <!-- ECharts -->
    <script src="./assets/echarts.min.js"></script>
    <!-- jQuery -->
    <script src="./assets/jquery.min.js"></script>
    <!-- font -->
    <link rel="stylesheet" href="./assets/font.css" />
    <style>
      /* 隐藏滚动条但可滚动 */
      .hide-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .bigScreenHeader {
        background: linear-gradient(
          90deg,
          rgba(0, 97, 191, 0.14) 0%,
          rgba(0, 97, 190, 0.14) 100%
        );
      }
      .bigScreenTitle {
        background: url("./assets/titleBg.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .contentMain {
      }
      .cardBox {
        background: rgba(0, 97, 190, 0.1);
        box-shadow: inset 0px 0px 14px 0px rgba(0, 97, 191, 0.65),
          inset 0px 1px 40px 0px rgba(25, 142, 255, 0.1);
        border: 1px solid #0082ff;
        position: relative;
      }
      .cardTile {
        width: 100%;
        height: 52px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        font-size: 18px;
        color: #fff;
      }
      .cardBox::before {
        content: "";
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: linear-gradient(to right, #ffec2e 20px, transparent 20px)
            top left,
          linear-gradient(to bottom, #ffec2e 20px, transparent 20px) top left,
          linear-gradient(to left, #ffec2e 20px, transparent 20px) top right,
          linear-gradient(to bottom, #ffec2e 20px, transparent 20px) top right,
          linear-gradient(to right, #ffec2e 20px, transparent 20px) bottom left,
          linear-gradient(to top, #ffec2e 20px, transparent 20px) bottom left,
          linear-gradient(to left, #ffec2e 20px, transparent 20px) bottom right,
          linear-gradient(to top, #ffec2e 20px, transparent 20px) bottom right;
        background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px,
          2px 20px, 20px 2px, 2px 20px;
        background-repeat: no-repeat;
        pointer-events: none;
      }
      .cardTile img {
        margin-left: 6px;
        display: block;
      }
      .realTimeOverviewMain {
        box-shadow: inset 0px 21px 50px 0px rgba(0, 97, 191, 0.35);
      }
      .numberText{
        font-family: "ZhengQingKeHuangYouTi";
        font-size: 30px;
        line-height: 30px;
        margin-top: 10px;
        span{
          font-family: "黑体";
        }
      }

      /* 渐变边框样式 - 使用border-image实现 */
      .gradient-border {
        padding: 9px;
        position: relative;
        border: 1px solid transparent;
        border-image: linear-gradient(
            to bottom,
            #0082ff,
            rgba(0, 178, 213, 0.1)
          )
          1;
      }
      .overviewTitle {
        height: 40px;
        line-height: 29px;
        font-size: 22px;
        color: #fff;
      }
      .windowSituation {
        padding-left: 15px;
        span {
          width: 80px;
          float: left;
          font-size: 18px;
          line-height: 32px;
          color: #fff;
          display: block;
        }
        em {
          display: block;
          height: 32px;
          line-height: 32px;
         background: linear-gradient( 180deg, rgba(42,189,255,0.34) 50%, rgba(0,97,190,0.34) 100%);
          font-size: 14px;
          color: #fff;
          padding: 0 12px;
          margin-left: 12px;
          margin-bottom: 12px;
          font-style: normal;
        }
      }
      .bigScreenBody {
        background: url("./assets/bigSrceenBg.png") no-repeat center center;
        background-size: 105% 105%; /* 放大背景图片以避免边缘露出 */
        animation: backgroundMove 8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
      }
      
      @keyframes backgroundMove {
        0% {
          background-position: center top;
        }
        50% {
          background-position: calc(50% + 20px) top;
        }
        100% {
          background-position: calc(50% - 20px) top;
        }
      }
      .overviewTitle {
        background: url("./assets/subTitleBg.png") no-repeat 34px center;
        background-size: auto 100%;
      }
      /* 四角小正方形 */
      .complete-square {
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: #ffec2e;
        border: 1px solid #ffec2e;
      }

      .square-tl {
        top: -3px;
        left: -3px;
      }

      .square-tr {
        top: -3px;
        right: -3px;
      }

      .square-bl {
        bottom: -3px;
        left: -3px;
      }

      .square-br {
        bottom: -3px;
        right: -3px;
      }
      #total-number div{
        font-family: "ZhengQingKeHuangYouTi";
        font-size: 40px;
        color: #66FFFF;
        box-shadow: inset 0px 10px 15px 0px rgba(0,97,191,0.35), inset 0px -10px 15px 0px rgba(0,97,191,0.35);
        background: url('./assets/numberBg.png') no-repeat center center;
        background-size: 100% 100%;
        line-height: 66px;
      }
      .overviewItemText{
        line-height: 28px;
        font-size: 14px;
        color: #fff;
        text-align: left;
      }
      .overviewItemNum{
        line-height: 28px;
        font-size: 20px;
        color: #4BC7FF;
        text-align: left;
      }
      .overviewItemNum span{
        margin-left: 8px;
        color: #fff;
      }
      .fractionBox div:nth-of-type(1){
        font-size: 30px;
        line-height: 30px;
        color: #66FFFF;
        font-family: "ZhengQingKeHuangYouTi";
      }
      .fractionBox div:nth-of-type(2){
        font-size: 12px;
        color: #fff;
      }
    </style>
  </head>
  <body class="bigScreenBody min-h-screen">
    <!-- 头部固定区域 -->
    <header
      class="bigScreenHeader w-full fixed top-0 left-0 z-10 px-[40px] h-[72px] transition-colors duration-300"
      id="pageHeader"
    >
      <div
        class="max-w-[1920px] h-[72px] mx-auto flex items-center justify-between"
      >
        <!-- 左侧logo -->
        <div class="flex items-center min-w-[200px]">
          <img src="./assets/logo.png" alt="LOGO" class="h-12 w-auto" />
        </div>
        <!-- 中间标题 -->
        <div
          class="bigScreenTitle w-[1284px] h-[91px] top-[0px] absolute left-1/2 -translate-x-1/2 flex items-center justify-center"
        >
          <img
            src="./assets/bigSrceenTitle.png"
            alt="标题"
            class="w-[355px] h-[25px] mt-[-23px]"
          />
        </div>
        <!-- 右侧时间 -->
        <div class="flex flex-col items-end min-w-[260px]">
          <span id="datetime" class="text-lg text-white"></span>
        </div>
      </div>
    </header>
    <!-- 内容区域 -->
    <main
      class="contentMain pt-[105px] px-[40px] pb-[62px] max-w-[1920px] mx-auto"
    >
      <div class="flex justify-between">
        <!-- 左侧栏 -->
        <section class="w-[465px] min-w-[320px] max-w-[465px]">
          <!-- 容器1 -->
          <div class="cardBox h-[150px] mb-[33px]">
            <!-- 数字标题 -->
            <div class="cardTile">
              总办理数 <img src="./assets/titleImg.png" alt="" />
            </div>
            <!-- 美化数字分位显示 -->
            <div
              id="total-number"
              class="mt-[12px] flex gap-4 items-center justify-center"
            >
              <!-- 数字位通过JS动态生成 -->
            </div>
          </div>
          <script>
            // 数字滚动动画函数
            function animateNumber(target, value, duration = 1200) { // 每个数字宽52px,高57px
              const digits = String(value).split("");
              const container = document.getElementById(target);
              container.innerHTML = "";
              digits.forEach((digit, idx) => {
                // 创建每一位数字的容器
                const digitBox = document.createElement("div");
                digitBox.className =
                  "w-[52px] h-[57px] font-bold text-blue-700 overflow-hidden";
                digitBox.style.position = "relative";
                // 创建滚动数字容器
                const scroll = document.createElement("div");
                scroll.style.transition = `transform ${duration}ms cubic-bezier(.68,-0.55,.27,1.55)`;
                scroll.style.position = "absolute";
                scroll.style.top = "0";
                scroll.style.left = "0";
                scroll.style.width = "100%";
                scroll.style.height = "100%";
                // 生成0-9数字
                for (let i = 0; i <= 9; i++) {
                  const n = document.createElement("div");
                  n.textContent = i;
                  n.className = "h-[57px] loading-[57px] text-center";
                  scroll.appendChild(n);
                }
                digitBox.appendChild(scroll);
                container.appendChild(digitBox);
                // 动画滚动到目标数字
                setTimeout(() => {
                  scroll.style.transform = `translateY(-${
                    parseInt(digit) * 57
                  }px)`;
                }, 100);
              });
            }
            // 初始化动画数值
            let num = 123456;
            document.addEventListener("DOMContentLoaded", function () {
              animateNumber("total-number", 123456);
            });
         
          </script>
          <!-- 容器2 -->
          <div class="cardBox h-[320px] mb-[34px]">
            <div class="cardTile">
              数量统计 <img src="./assets/titleImg.png" alt="" />
            </div>
            <!-- 五个小块，两行展示 -->
            <div class="grid grid-cols-3 gap-3 mb-3 pl-[34px]">
              <!-- 小块1 -->
              <div class="realTimeOverviewItem col-span-1 flex flex-col">
                <div class="overviewItemText">线上预约总数</div>
                <div class="overviewItemNum flex items-center">
                  150 <span class="text-xs">次</span>
                </div>
              </div>
              <!-- 小块2 -->
              <div class="realTimeOverviewItem col-span-1 flex flex-col">
                <div class="overviewItemText">线下叫号总数</div>
                <div class="overviewItemNum flex items-center">
                  128 <span class="text-xs">次</span>
                </div>
              </div>
              <!-- 小块3 -->
              <div class="realTimeOverviewItem col-span-1 flex flex-col">
                <div class="overviewItemText">办理总数</div>
                <div class="overviewItemNum">
                  96 <span class="text-xs">件</span>
                </div>
              </div>
              <!-- 小块4 -->
              <div class="realTimeOverviewItem col-span-1 flex flex-col">
                <div class="overviewItemText">办结总数</div>
                <div class="overviewItemNum">
                  32 <span class="text-xs">件</span>
                </div>
              </div>
              <!-- 小块5 -->
              <div
                class="realTimeOverviewItem col-span-1 flex flex-col"
              >
                <div class="overviewItemText">咨询总数</div>
                <div class="overviewItemNum">
                  80 <span class="text-xs">次</span>
                </div>
              </div>
            </div>
            <!-- 满意度容器 -->
            <div class="cardTile">
              整体满意度 <img src="./assets/titleImg.png" alt="" />
            </div>
            <div class="flex gap-3 mt-2">
              <!-- 分数+人数 -->
              <div class="fractionBox flex-1 flex flex-col items-center">
                <div>4.8</div>
                <div>1929人评分</div>
              </div>
              <!-- 五星+满意度 -->
              <div class="satisfactionBox flex-1 flex flex-col items-center">
                <div class="flex items-center mb-1">
                  <!-- <span class="material-icons text-yellow-400 text-base">star</span> -->
                  <!-- <span class="material-icons text-yellow-400 text-base">star</span> -->
                  <!-- <span class="material-icons text-yellow-400 text-base">star</span> -->
                  <!-- <span class="material-icons text-yellow-400 text-base">star</span> -->
                  <!-- <span class="material-icons text-yellow-400 text-base">star_half</span> -->
                </div>
                <div>非常满意</div>
              </div>
            </div>
          </div>
          <!-- 容器3 柱状图 -->
          <div class="cardBox h-[230px] mb-[34px]">
            <div class="cardTile">
              业务办理总量统计 <img src="./assets/titleImg.png" alt="" />
            </div>
            <div id="left-bar1" class="flex-1 h-[160px]"></div>
          </div>
          <!-- 容器4 柱状图 -->
          <div class="cardBox h-[230px] flex flex-col">
            <div class="cardTile">
              各部门业务办理量统计 <img src="./assets/titleImg.png" alt="" />
            </div>
            <div id="left-bar2" class="flex-1 h-[150px]"></div>
          </div>
        </section>
        <!-- 中间栏 -->
        <section class="flex-1 flex flex-col mx-[44px]">
          <div class="gradient-border mb-[33px]">
            <!-- 四角小正方形 -->
            <div class="complete-square square-tl"></div>
            <div class="complete-square square-tr"></div>
            <div class="complete-square square-bl"></div>
            <div class="complete-square square-br"></div>
            <div class="realTimeOverviewMain p-[15px] h-[480px] flex flex-col justify-between">
              <div class="overviewTitle flex">
                <img
                  class="mr-[13px] mt-[3px] w-[26px] h-[26px]"
                  src="./assets/titleBeforeImg.png"
                  alt=""
                />
                实时概况-中关村校区
                <img
                  class="ml-[10px] mt-[10px] w-[121px] h-[10px]"
                  src="./assets/titleImg.png"
                  alt=""
                />
              </div>
              <!-- 六个小块，两行三列 -->
              <div class="pl-[46px] grid grid-cols-3 mb-6 mt-[10px]">
                <!-- 小块1 -->
                <div class="pr-[90px] mb-[20px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/今日预约数 .png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">今日预约数</div>
                    <div class="numberText">
                      128
                      <span class="text-xs font-normal text-gray-400">人</span>
                    </div>
                  </div>
                </div>
                <!-- 小块2 -->
                <div class="pr-[90px] mb-[20px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/预约取号数 .png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">预约取号数</div>
                    <div class="numberText">
                      96
                      <span class="text-xs font-normal text-gray-400">件</span>
                    </div>
                  </div>
                </div>
                <!-- 小块3 -->
                <div class="pr-[90px] mb-[20px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/线下叫号数.png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">线下叫号数</div>
                    <div class="numberText">
                      32
                      <span class="text-xs font-normal text-gray-400">件</span>
                    </div>
                  </div>
                </div>
                <!-- 小块4 -->
                <div class="pr-[90px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/今日办理数 .png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">今日办理数</div>
                    <div class="numberText">
                      150
                      <span class="text-xs font-normal text-gray-400">人</span>
                    </div>
                  </div>
                </div>
                <!-- 小块5 -->
                <div class="pr-[90px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/今日办结数.png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">今日办结数</div>
                    <div class="numberText">
                      5
                      <span class="text-xs font-normal text-gray-400">人</span>
                    </div>
                  </div>
                </div>
                <!-- 小块6 -->
                <div class="pr-[90px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/今日咨询量.png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">今日咨询量</div>
                    <div class="numberText">
                      80
                      <span class="text-xs font-normal text-gray-400">件</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 三组标题 -->
              <div class="windowSituation">
                <!-- 繁忙窗口 -->
                <div class="overflow-hidden mb-[15px]">
                  <span>繁忙窗口</span>
                  <div class="w-[calc(100%-100px)] float-left flex items-center flex-wrap">
                    <em>社会服务</em>
                    <em>咨询反馈服务</em>
                    <em>教师综合服务</em>
                    <em>学校印信服务</em>
                  </div>
                 
                </div>
                <!-- 空闲窗口 -->
                <div class="overflow-hidden mb-[15px]">
                  <span>空闲窗口</span>
                  <div class="w-[calc(100%-100px)] float-left flex items-center flex-wrap">
                    <em>外事服务</em>
                    <em>教师综合服务4</em>
                  </div>
                </div>
                <!-- 排队情况 -->
                <div class="overflow-hidden">
                  <span>排队情况</span>
                  <div class="w-[calc(100%-100px)] float-left flex items-center flex-wrap">
                    <em>学校印信服务：28</em>
                    <em>教师综合服务：22</em>
                    <em>教师综合服务3：20</em>
                    <em>教师综合服务4：19</em>
                    <em>教师综合服务5：12</em>
                    <em>咨询反馈服务7：21</em>
                    <em>社会服务：18</em>
                    <em>外事服务：9</em>
                  </div>
                
                </div>
              </div>
            </div>
          </div>
          <!-- 第二个容器内容同上 -->
          <div class="gradient-border">
            <!-- 四角小正方形 -->
            <div class="complete-square square-tl"></div>
            <div class="complete-square square-tr"></div>
            <div class="complete-square square-bl"></div>
            <div class="complete-square square-br"></div>
           <div class="realTimeOverviewMain p-[15px] h-[480px] flex flex-col justify-between">
              <div class="overviewTitle flex">
                <img
                  class="mr-[13px] mt-[3px] w-[26px] h-[26px]"
                  src="./assets/titleBeforeImg.png"
                  alt=""
                />
                实时概况-中关村校区
                <img
                  class="ml-[10px] mt-[10px] w-[121px] h-[10px]"
                  src="./assets/titleImg.png"
                  alt=""
                />
              </div>
              <!-- 六个小块，两行三列 -->
              <div class="pl-[46px] grid grid-cols-3 mb-6 mt-[10px]">
                <!-- 小块1 -->
                <div class="pr-[90px] mb-[20px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/今日预约数 .png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">今日预约数</div>
                    <div class="numberText">
                      128
                      <span class="text-xs font-normal text-gray-400">人</span>
                    </div>
                  </div>
                </div>
                <!-- 小块2 -->
                <div class="pr-[90px] mb-[20px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/预约取号数 .png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">预约取号数</div>
                    <div class="numberText">
                      96
                      <span class="text-xs font-normal text-gray-400">件</span>
                    </div>
                  </div>
                </div>
                <!-- 小块3 -->
                <div class="pr-[90px] mb-[20px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/线下叫号数.png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">线下叫号数</div>
                    <div class="numberText">
                      32
                      <span class="text-xs font-normal text-gray-400">件</span>
                    </div>
                  </div>
                </div>
                <!-- 小块4 -->
                <div class="pr-[90px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/今日办理数 .png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">今日办理数</div>
                    <div class="numberText">
                      150
                      <span class="text-xs font-normal text-gray-400">人</span>
                    </div>
                  </div>
                </div>
                <!-- 小块5 -->
                <div class="pr-[90px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/今日办结数.png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">今日办结数</div>
                    <div class="numberText">
                      5
                      <span class="text-xs font-normal text-gray-400">人</span>
                    </div>
                  </div>
                </div>
                <!-- 小块6 -->
                <div class="pr-[90px] flex items-center">
                  <img
                    class="w-[75px] h-[75px] block"
                    src="./assets/今日咨询量.png"
                    alt=""
                  />
                  <div class="pt-[5px]">
                    <div class="whiteSm">今日咨询量</div>
                    <div class="numberText">
                      80
                      <span class="text-xs font-normal text-gray-400">件</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 三组标题 -->
              <div class="windowSituation">
                <!-- 繁忙窗口 -->
                <div class="overflow-hidden mb-[15px]">
                  <span>繁忙窗口</span>
                  <div class="w-[calc(100%-100px)] float-left flex items-center flex-wrap">
                    <em>社会服务</em>
                    <em>咨询反馈服务</em>
                    <em>教师综合服务</em>
                    <em>学校印信服务</em>
                  </div>
                 
                </div>
                <!-- 空闲窗口 -->
                <div class="overflow-hidden mb-[15px]">
                  <span>空闲窗口</span>
                  <div class="w-[calc(100%-100px)] float-left flex items-center flex-wrap">
                    <em>外事服务</em>
                    <em>教师综合服务4</em>
                  </div>
                </div>
                <!-- 排队情况 -->
                <div class="overflow-hidden">
                  <span>排队情况</span>
                  <div class="w-[calc(100%-100px)] float-left flex items-center flex-wrap">
                    <em>学校印信服务：28</em>
                    <em>教师综合服务：22</em>
                    <em>教师综合服务3：20</em>
                    <em>教师综合服务4：19</em>
                    <em>教师综合服务5：12</em>
                    <em>咨询反馈服务7：21</em>
                    <em>社会服务：18</em>
                    <em>外事服务：9</em>
                  </div>
                
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- 右侧栏 -->
        <section class="flex flex-col min-w-[400px] max-w-[520px]">
          <!-- 容器1 双折线图 -->
          <div class="cardBox h-[240px] mb-[24px]">
            <div class="cardTile">
              今日取号时间趋势 <img src="./assets/titleImg.png" alt="" />
            </div>
            <div id="right-line1" class="flex-1 min-h-[165px]"></div>
          </div>
          <!-- 容器2 单柱状图 -->
          <div class="cardBox h-[240px] mb-[24px]">
            <div class="cardTile">
              今日部门办理事项分析 <img src="./assets/titleImg.png" alt="" />
            </div>
            <div id="right-bar1" class="flex-1 min-h-[165px]"></div>
          </div>
          <!-- 容器3 双柱状图 -->
          <div class="cardBox h-[240px] mb-[24px]">
            <div class="cardTile">
              今日办理业务事项分析 <img src="./assets/titleImg.png" alt="" />
            </div>
            <div id="right-bar2" class="flex-1 min-h-[165px]"></div>
          </div>
          <!-- 容器4 双折线图 -->
          <div class="cardBox h-[240px]">
            <div class="cardTile">
              未来七天预约量趋势 <img src="./assets/titleImg.png" alt="" />
            </div>
            <div id="right-line2" class="flex-1 min-h-[165px]"></div>
          </div>
        </section>
      </div>
    </main>
    <script>
      // 更新时间显示
      function updateTime() {
        const now = new Date();
        const y = now.getFullYear();
        const m = String(now.getMonth() + 1).padStart(2, "0");
        const d = String(now.getDate()).padStart(2, "0");
        const h = String(now.getHours()).padStart(2, "0");
        const min = String(now.getMinutes()).padStart(2, "0");
        const s = String(now.getSeconds()).padStart(2, "0");
        const weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        document.getElementById("datetime").textContent = `${y}年${m}月${d}日 ${
          weekArr[now.getDay()]
        }　${h}:${min}:${s}`;
      }
      setInterval(updateTime, 1000);
      updateTime();

      // ECharts 图表初始化
      function createBarChart(domId, seriesName, data, color) {
        var chart = echarts.init(document.getElementById(domId));
        var option = {
          tooltip: {},
          xAxis: { type: "category", data: ["A", "B", "C", "D", "E"] },
          yAxis: {},
          series: [
            {
              name: seriesName,
              type: "bar",
              data: data,
              itemStyle: {
                color: color,
                shadowColor: color,
                shadowBlur: 10,
              },
              barWidth: 24,
            },
          ],
          grid: { left: 30, right: 10, top: 30, bottom: 20 },
        };
        chart.setOption(option);
      }
      function createDoubleBarChart(domId) {
        var chart = echarts.init(document.getElementById(domId));
        var option = {
          tooltip: {},
          legend: { data: ["A组", "B组"] },
          xAxis: { type: "category", data: ["一", "二", "三", "四", "五"] },
          yAxis: {},
          series: [
            {
              name: "A组",
              type: "bar",
              data: [12, 20, 15, 8, 10],
              itemStyle: {
                color: "#4f8cff",
                shadowColor: "#4f8cff",
                shadowBlur: 10,
              },
              barWidth: 18,
            },
            {
              name: "B组",
              type: "bar",
              data: [8, 15, 10, 18, 12],
              itemStyle: {
                color: "#ffb74d",
                shadowColor: "#ffb74d",
                shadowBlur: 10,
              },
              barWidth: 18,
            },
          ],
          grid: { left: 30, right: 10, top: 30, bottom: 20 },
        };
        chart.setOption(option);
      }
      function createLineChart(domId, legend, data1, data2, color1, color2) {
        var chart = echarts.init(document.getElementById(domId));
        var option = {
          tooltip: { trigger: "axis" },
          legend: { data: legend },
          xAxis: {
            type: "category",
            data: ["1", "2", "3", "4", "5", "6", "7"],
          },
          yAxis: {},
          series: [
            {
              name: legend[0],
              type: "line",
              data: data1,
              smooth: true,
              lineStyle: {
                color: color1,
                width: 3,
                shadowColor: color1,
                shadowBlur: 10,
              },
              areaStyle: { color: color1, opacity: 0.15 },
            },
            {
              name: legend[1],
              type: "line",
              data: data2,
              smooth: true,
              lineStyle: {
                color: color2,
                width: 3,
                shadowColor: color2,
                shadowBlur: 10,
              },
              areaStyle: { color: color2, opacity: 0.15 },
            },
          ],
          grid: { left: 30, right: 10, top: 30, bottom: 20 },
        };
        chart.setOption(option);
      }
      function createSingleLineChart(domId, legend, data, color) {
        var chart = echarts.init(document.getElementById(domId));
        var option = {
          tooltip: { trigger: "axis" },
          legend: { data: [legend] },
          xAxis: {
            type: "category",
            data: ["1", "2", "3", "4", "5", "6", "7"],
          },
          yAxis: {},
          series: [
            {
              name: legend,
              type: "line",
              data: data,
              smooth: true,
              lineStyle: {
                color: color,
                width: 3,
                shadowColor: color,
                shadowBlur: 10,
              },
              areaStyle: { color: color, opacity: 0.15 },
            },
          ],
          grid: { left: 30, right: 10, top: 30, bottom: 20 },
        };
        chart.setOption(option);
      }
      // 初始化所有图表
      $(function () {
        createBarChart("left-bar1", "左3", [5, 8, 6, 7, 9], "#42a5f5");
        createBarChart("left-bar2", "左4", [7, 6, 8, 5, 10], "#66bb6a");
        createLineChart(
          "right-line1",
          ["A", "B"],
          [10, 12, 8, 14, 10, 13, 9],
          [8, 10, 7, 12, 8, 11, 7],
          "#42a5f5",
          "#ffb74d"
        );
        createBarChart("right-bar1", "右2", [12, 18, 15, 10, 14], "#ab47bc");
        createDoubleBarChart("right-bar2");
        createLineChart(
          "right-line2",
          ["C", "D"],
          [7, 9, 6, 8, 7, 10, 8],
          [6, 8, 5, 7, 6, 9, 7],
          "#26a69a",
          "#ef5350"
        );
      });
    </script>
  </body>
</html>
